/*
 * @Description:
 * @Autor: lcz
 * @Date: 2022-06-16 15:41:37
 * @LastEditors: lcz
 * @LastEditTime: 2022-06-17 14:04:46
 */
import { CSSProperties } from 'react'
import { Carousel } from 'antd'

export type dotPositionEnum = 'bottom' | 'top' | 'left' | 'right'

export interface BannerProps {
  tabIndex?: number
  class?: string
  style?: CSSProperties
  dataSource: any[]
  itemStyle: Object
  onChange?: (currentSlide?: number) => void
  dotPosition: dotPositionEnum
  autoplay?: boolean
  dots?: boolean
}

const CreateCode = (props: BannerProps) => {
  return (
    <div className={props.class} tabIndex={props.tabIndex} style={props.style}>
      <Carousel
        afterChange={props.onChange}
        dotPosition={props.dotPosition}
        autoplay={props.autoplay}
        dots={props.dots}
      >
        {props.dataSource.length > 0
          ? props.dataSource.map((i, index) => {
              return (
                <div key={index} style={props.itemStyle}>
                  <img src={i.url} alt={i.url} style={{ margin: '0 auto' }} />
                </div>
              )
            })
          : null}
      </Carousel>
    </div>
  )
}

export default CreateCode
